<template>
  <div class="wraps">
    <div
      :style="{
        height: item.height + 'px',
        background: item.background,
        left: item.left + 'px',
        top: item.top + 'px',
      }"
      v-for="item in waterList"
      class="items"
    ></div>
  </div>
  <!-- <div>值：{{ title }}</div>
  <div>值：{{ arr }}</div> -->
  <!-- <button @click="send">给父组件传值</button> -->
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
const props = defineProps<{ list: any[] }>();
const waterList = reactive<any[]>([]);
const heightList: number[] = [];
const init = () => {
  const width = 130;
  const x = document.body.clientWidth;
  const column = Math.floor(x / width);
  console.log(column);

  for (let i = 0; i < props.list.length; i++) {
    if (i < column) {
      props.list[i].left = i * width;
      props.list[i].top = 20;
      waterList.push(props.list[i]);
      heightList.push(props.list[i].height);
      console.log(heightList, "==========");

    } else {
      let current = heightList[0];
      let index = 0;
      heightList.forEach((h, i) => {
        if (current > h) {
          current = h;
          index = i;
        }
      });
      console.log(current, "jjjjj");
      props.list[i].top = current + 30;
      props.list[i].left = index * width;
      heightList[index] = heightList[index] + props.list[i].height + 20;
      waterList.push(props.list[i]);
    }
  }
};
onMounted(() => {
  init();
});
//ts 特有定义默认值 withDefaults
// withDefaults(
//   defineProps<{
//     title: string;
//     arr: number[];
//   }>(),
//   { arr: () => [999] }
// );
// 给父组件传值 defineEmits
// const emit = defineEmits(['on-click'])
// const emit = defineEmits<{
//     (e:"on-click",name:string):void
// }>()
// const send = ()=>{
//  emit('on-click','小曼')
// }
defineExpose({
    name:"小曼"
})
// const props = defineProps<{
//   title: string;
//   arr: number[];
// }>();
// const props = defineProps({
//   title:{
//       type:String,
//       default:"默认值"
//   }
// })
</script>

<style lang="less">
.wraps {
  position: relative;
  .items {
    position: absolute;
    width: 120px;
  }
}
</style>
